<template>
    <div class="libraryson">
        <span><img :src="img1" alt="" @click="funa()"></span>
        <span><img :src="img2" alt="" @click="funb()"></span>
        <span><img :src="img3" alt="" @click="func()"></span>
        <span><img :src="img4" alt="" @click="fund()"></span>
        <span><img :src="img5" alt="" @click="fune()"></span>
        <span><img :src="img6" alt="" @click="funf()"></span>
        <span><img :src="img7" alt="" @click="fung()"></span>
        <span><img :src="img8" alt="" @click="funh()"></span>
    </div>
</template>

<script>
export default {
    props:["img1","img2","img3","img4","img5","img6","img7","img8"],
    methods:{
        funa(){
            this.$router.push("/brand/era")
        },
        funb(){
            this.$router.push("/brand2/era")
        },
        func(){
            this.$router.push("/brand3/era")
        },
        fund(){
            this.$router.push("/brand4/era")
        },
        fune(){
            this.$router.push("/brand5/era")
        },
        funf(){
            this.$router.push("/brand6/era")
        },
        fung(){
            this.$router.push("/brand7/era")
        },
        funh(){
            this.$router.push("/brandlist")
        },
    }
}
</script>

<style scoped>
    .libraryson{
        display: flex;
        font-size: 0.12rem;
    }
    span{
        display: inline-block;
        width: 0.8rem;
        border: 1px solid #ddd;
        margin: 0 0.1rem;
    }
    img{
        width: 100%;
    }
</style>